<!-- 保证金充值 -->
<template>
	<view class="SecurityDeposit">
		<view class="deposit f-background radius20">
			<view class="deposit-com">
				<view class="color9 size-28">保证金需缴纳金额</view>
				<view class="font-weight-600 size-60 color0">
					<text class="size-28 font-weight-400">￥</text>
					{{userInfo.bondAmount*1 || 0}}<text class="size-28 font-weight-400">.00</text>
				</view>
				<view class="size-24 color" v-if="!userInfo.bondAmount*1">您还未缴纳</view>
				<navigator class="withdrawal dis background radius100" hover-class="none"
					url="/packageGrid/withdraw/withdraw" v-else>
					<text class="size-28 color-f">提现</text>
				</navigator>
			</view>
			<view class="security text-align border-top">
				<navigator hover-class="none" url="/packageColonel/bean-manag/detail-list?type=3"
					class="security-nav size-28 color3">充值记录</navigator>
				<view class="nav background-05"></view>
				<navigator hover-class="none" url="/packageColonel/bean-manag/detail-list?type=4"
					class="security-nav size-28 color3">保证金明细</navigator>
			</view>
		</view>
		<view class="reminder">
			<view class="size-28 color6">温馨提示：</view>
			<view class="size-26">1、需缴纳保证金后才能正常接单赚钱</view>
			<view class="size-26">2、当保证金低于{{userInfo.minAmount || 0}}时，需重新充值保证金</view>
			<view class="size-26">3、为保证服务质量，有效投诉、配送超时会扣除对应保证金</view>
			<view class="size-26">4、保证金提现需确认没有任何投诉</view>
			<view class="size-26">5、保证金提现申请后预计7-15个工作日内将款项放发至您提供的银行卡号中</view>
		</view>
		<view class="immediately inset-bottom pof width100 app-left">
			<navigator hover-class="none" url="/packagePerson/contact-us/contact-us" class="size-32 color6 dis">
				<text class="iconfont icon-kefu color8"></text>联系客服
			</navigator>
			<view class="button">
				<u-button type="primary"
					:customStyle="{width: '690rpx',height: '96rpx',borderRadius: '12rpx',marginTop: '42rpx'}"
					color="#EB0000" @click="postBondRecharge">
					<text class="color-f font-weight-600 size-32">立即充值</text>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { BondRecharge,DeliveryUserInfo } from "@/api/index"
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.postDeliveryUserInfo()
		},
		methods: {
			async postDeliveryUserInfo() {
				const { code, data } = await DeliveryUserInfo()
				if (code == "200") {
					this.userInfo = data
					uni.setStorageSync('userInfo', data)
				}
			},
			async postBondRecharge() {
				const { code, data } = await BondRecharge()
				const _this = this
				let { userInfo } = this
				if (code == '200') {
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: data.nonceStr,
						timeStamp: String(data.timestamp),
						package: data.packageStr,
						signType: 'MD5',
						paySign: data.paySign,
						success(res) {
							_this.postDeliveryUserInfo()
							uni.showToast({
								title: '充值成功',
								icon: 'none',
								duration: 2000
							});
						},
						fail(res) {
							_this.disabled = false
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
						},
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.SecurityDeposit {
		padding: 20rpx;

		.withdrawal {
			width: 142rpx;
			height: 54rpx;
		}

		.deposit {
			padding: 0 12rpx;

			.deposit-com {
				display: grid;
				grid-gap: 20rpx;
				padding: 24rpx 12rpx 40rpx;
			}

			.security {
				display: grid;
				grid-template-columns: 1fr 1px 1fr;
				align-items: center;

				.security-nav {
					padding: 24rpx 0;
				}

				.nav {
					height: 100%;
				}
			}
		}

		.reminder {
			color: #777777;
			display: grid;
			grid-gap: 20rpx;
			padding: 24rpx 0;
		}

		.immediately {
			bottom: 0;

			.button {
				padding: 0 0 36rpx;
			}

			.icon-kefu {
				margin-right: 12rpx;
			}
		}
	}
</style>